<template v-if="comment.children && comment.children.length">
  <div class="comment-node">
    <!-- 添加折叠按钮 -->
    <div class="header" @click.stop="toggleExpand">
      <a-comment>
        <template #actions>
          <span @click="replyToChild(props.comment.id)">回复</span>
          <span @click="deleteComment(props.comment.id)">删除</span>
        </template>
        <template #author>
          <a>{{ props.comment.authorName }}</a>
        </template>
        <template #avatar>
          <a-avatar
            :src="props.comment.avatar || 'https://joeschmoe.io/api/v1/random'"
            :alt="props.comment.authorName"
          />
        </template>
        <template #content>
          <p>{{ props.comment.content }}</p>
        </template>
        <div>
          <CommentForm
            v-if="props.activeIndex === props.comment.id"
            :key="props.comment.id"
            :articleId="String(route.params.articleId)"
            :parentId="props.comment.id"
            placeholder="写下你的回复..."
            @submit-success="handleChildSubmit"
          />
        </div>
        <span v-if="hasChildren" class="expand-icon">
          {{ isExpanded ? "收起评论" : "查看评论" }}
        </span>
        <div v-show="isExpanded" class="children">
          <CommentNode
            v-for="child in props.comment.children"
            :key="child.id"
            :comment="child"
            :active-index="props.activeIndex"
            @update:active-index="replyToChild"
          />
        </div>
      </a-comment>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch, defineProps, PropType, inject } from "vue";

import { useRoute } from "vue-router";
import CommentForm from "@/components/comment/CommentForm.vue";
import { Comment } from "@/components/comment/Comment";
import { fa } from "element-plus/es/locale";
const route = useRoute();

// 在组件顶部注入方法
const getCommentData = inject<() => Promise<void>>("getCommentData", () =>
  Promise.resolve()
);

// 计算属性
const props = defineProps({
  comment: {
    type: Object as PropType<Comment>,
    required: true,
  },
  activeIndex: {
    type: Number,
    default: -1,
  },
});

// 修改后代码（主要改动部分）
const emit = defineEmits(["update:activeIndex"]);

const replyToChild = (commentId: number) => {
  const newValue = props.activeIndex === commentId ? -1 : commentId;
  emit("update:activeIndex", newValue);
};
const deleteComment = (commentId: number) => {
  // 这里可以添加逻辑来处理删除评论的操作
  console.log(`删除评论 ID: ${commentId}`);
};
const handleChildSubmit = async () => {
  emit("update:activeIndex", -1); // 通过 emit 修改 activeIndex
  // 调用注入的方法来刷新评论数据
  try {
    await getCommentData(); // 调用注入的方法
    console.log("评论数据已刷新");
  } catch (error) {
    console.error("刷新数据失败:", error);
  }
};

// 新增展开状态
const isExpanded = ref(false);
const hasChildren = computed(() => props.comment.children?.length > 0);

const toggleExpand = () => {
  if (hasChildren.value) {
    isExpanded.value = !isExpanded.value;
  }
};
</script>
<style>
.children {
  transition: margin 0.3s ease;
  margin-top: 12px;
}
</style>
